<template>
  <div class="func-comp-form">

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse :value="[0,1]">
          <Panel>
            表单域配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem :required="true" label="绑定表单数据字段">
                  <Input type="text" size="small" v-model="fieldConfig.bindingFieldName"/>
                </FormItem>
                <FormItem label="标签文本">
                  <Input type="text" size="small" v-model="formItemConfig.label"/>
                </FormItem>
                <FormItem label="标签宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="formItemConfig.labelWidth" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="隐藏标签">
                  <i-switch size="small" v-model="formItemConfig.hiddenLabel"></i-switch>
                </FormItem>
                <FormItem label="隐藏此表单域">
                  <i-switch size="small" v-model="formItemConfig.hidden"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            文件上传配置
            <div slot="content">
              <Form :label-width="100">

                <FormItem label="上传文件字段名">
                  <Input type="text" size="small" v-model="widgetConfig.name"/>
                </FormItem>
                <FormItem label="上传地址">
                  <Input type="textarea" :rows="4" size="small" v-model="widgetConfig.action"/>
                </FormItem>
                <FormItem label="文件类型限制">
                  <Tooltip content="请严格按照.jpg,.png这样的格式来编写" :max-width="200" placement="left">
                    <Input type="textarea" :rows="4" size="small" v-model="widgetConfig.accept"/>
                  </Tooltip>
                </FormItem>
                <FormItem label="支持多选">
                  <i-switch size="small" v-model="widgetConfig.multiple"></i-switch>
                </FormItem>
                <FormItem label="支持粘贴上传">
                  <i-switch size="small" v-model="widgetConfig.paste"></i-switch>
                </FormItem>
                <FormItem label="显示已上传列表">
                  <i-switch size="small" v-model="widgetConfig.showUploadList"></i-switch>
                </FormItem>
                <FormItemPanel title="请求头">
                  <CodeEditor v-model="widgetConfig.headers" mode="json"></CodeEditor>
                </FormItemPanel>
                <FormItemPanel title="上传附带的请求数据">
                  <CodeEditor v-model="widgetConfig.data" mode="json"></CodeEditor>
                </FormItemPanel>


              </Form>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
<!--      <TabPane name="field_config_tab" tab="main_tabs" label="数据校验">
        <FormItemRuleCreator v-model="formItemConfig.rules"></FormItemRuleCreator>
      </TabPane>-->
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <FormItemInteractionEditTable :widgetEventCodeConfig="widgetEventCodeConfig"></FormItemInteractionEditTable>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import FormWidgetFormMixin from "@/mixin/FormWidgetFormMixin";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});

export default {
  name: "FormItemFileUploadWidgetForm",
  mixins: [FormWidgetFormMixin],
  props: {},
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {
    ...mapFields({

      fieldConfig: 'component.compConfigData.fieldConfig',
      formItemConfig: 'component.compConfigData.formItemConfig',
      widgetConfig: 'component.compConfigData.widgetConfig',
      widgetEventCodeConfig: 'component.compConfigData.widgetEventCodeConfig',

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
